<section ng-if="challenge.isActive" class="ev-sm-container ev-view challenge-container">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view margin-btm-0">
        <div class="row margin-bottom-cancel">
            <div class="col s12 m11 l11">
                <h5 class="w-300">Submission Guidelines</h5>
            </div>
            <div ng-if="challenge.isChallengeHost" class="col s1 m1">
                <a class="pointer" ng-click="challenge.submissionGuidelinesDialog($event)">
                    <i class="fa fa-pencil" aria-hidden="true">
                    </i>&nbsp;edit
                </a>
            </div>
            <div class="col s12 m12 l12">
                <div class="what-a-separator"></div>
            </div>

            <div class="col s12" ng-if="challenge.isChallengeHost">
                <p class="fs-16"><strong>Note: </strong>Your submissions won't be
                    visible on leaderboard for <strong class="blue-text"> Public Challenge Phases </strong>
                    since you are a challenge host
                    for this challenge.<br>This feature is only for your testing purposes.</p>
                </strong>
            </div>
            <div class="col s12">
                <div mathjax-bind="challenge.page.submission_guidelines" class="fs-16 w-300 submission-guidelines trix-container"></div>
            </div>
        </div>
    </div>
</section>
<section ng-if="!challenge.isChallengeHost" class="ev-sm-container ev-view challenge-container">
    <div class="ev-md-container ev-card-panel ev-z-depth-5">
        Click here to deregister from this challenge:
        <button class="btn btn-custom ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-16" ng-click="challenge.deregisterdialog($event)">Deregister</button>
    </div>
</section>

<!-- To Check if Manual Approval is done or off-->
<div ng-if="challenge.eligible_to_submit">
<!-- If challenge is docker based -->
<section class="ev-sm-container ev-view challenge-container phase-container" ng-if="challenge.page.is_docker_based">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view margin-btm-0">
        <div class="row margin-bottom-cancel">
            <div class="col s12">
                <h5 class="w-300">
                    Submission instructions for docker based challenges
                </h5>
                <ol class="fs-16 w-300">
                    <li>Install evalai-cli<br>
                        <code>$ pip install evalai{{challenge.cliVersion}}</code>
                        <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                            ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                            data-clipboard-text='pip install "evalai{{challenge.cliVersion}}"'>
                            <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                        </button>
                    </li>
                    <li>Add your EvalAI account token to evalai-cli<br>
                        <code>$ evalai set_token {{challenge.refreshJWT}}</code>
                        <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                            ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                            data-clipboard-text="evalai set_token {{challenge.refreshJWT}}">
                            <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                        </button>
                    </li>
                    <li>Push docker image to EvalAI docker registry<br>
                        <code>$ evalai push &lt;image&gt;:&lt;tag&gt; --phase &lt;phase_name&gt;</code>
                        <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                            ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                            data-clipboard-text="evalai push <image>:<tag> --phase <phase_name>">
                            <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                        </button>
                    </li>
                    <li>Use <code>--private</code> or <code>--public</code> flag in the submission command to make the submission private or public respectively.<br>
                    </li>
                    <li>For more commands, please refer to <a class="highlight-link"
                            href="https://cli.eval.ai/" target="_blank">evalai-cli documentation.</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- If challenge is docker based -->
<section class="ev-sm-container ev-view challenge-container phase-container" ng-if="challenge.page.is_docker_based">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
        <div class="row margin-bottom-cancel">
            <div class="col s12">
                <h5 class="w-300">
                    Submission limits
                </h5>
                <p class="fs-16 w-300">
                    <strong>Team name:</strong> {{challenge.phaseRemainingSubmissions.participant_team}}
                </p>
                <table class="responsive-table fs-16 w-300">
                    <thead>
                        <tr>
                            <th>Phase details</th>
                            <th>Remaining submissions</th>
                            <th>Submission command</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="key in challenge.phaseRemainingSubmissions.phases">
                            <td>{{key.name}}
                                <br>
                                <strong class="text-med-black">Start date:
                                </strong>{{key.start_date | date:'medium'}}
                                <br>
                                <strong class="text-med-black">End date: </strong>{{key.end_date | date:'medium'}}
                            </td>
                            <td ng-if="challenge.phaseRemainingSubmissionsFlags[key.id] === 'showSubmissionNumbers'">
                                <strong>
                                    Today:
                                </strong>
                                {{key.limits.remaining_submissions_today_count}}<br>
                                <strong>
                                    This month:
                                </strong>
                                {{key.limits.remaining_submissions_this_month_count}}<br>
                                <strong>
                                    Total:
                                </strong>
                                {{key.limits.remaining_submissions_count}}
                            </td>
                            <td ng-if="challenge.phaseRemainingSubmissionsFlags[key.id] === 'showClock'">
                                <strong>{{key.limits.message}}</strong><br> Next submission will be available in<br>
                                <div>
                                    <span
                                        ng-if="challenge.days!=0">{{challenge.phaseRemainingSubmissionsCountdown[key.id].days}}
                                        Days, </span>{{challenge.phaseRemainingSubmissionsCountdown[key.id].hours}}
                                    hours : {{challenge.phaseRemainingSubmissionsCountdown[key.id].minutes}} minutes
                                    :
                                    {{challenge.phaseRemainingSubmissionsCountdown[key.id].seconds}} seconds
                                </div>
                            </td>
                            <td ng-if="challenge.phaseRemainingSubmissionsFlags[key.id] === 'maxExceeded'">
                                <strong>{{key.limits.message}}</strong><br>
                                <strong>
                                    {{key.limits.maxExceededMessage}}
                                </strong>
                            </td>
                            <td>
                                <div>
                                    <code>$ evalai push &lt;image&gt;:&lt;tag&gt; --phase {{key.slug}}</code>
                                    <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                                        ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                                        data-clipboard-text="evalai push <image>:<tag> --phase {{key.slug}}">
                                        <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                                    </button>
                                </div>
                                <br/>
                                <div>
                                    <code>$ evalai push &lt;image&gt;:&lt;tag&gt; --phase {{key.slug}} --private</code>
                                    <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                                        ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                                        data-clipboard-text="evalai push <image>:<tag> --phase {{key.slug}} --private">
                                        <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="loader-container card-loader-container" id="loader" ng-show="challenge.isExistLoader"
                class="fade">
                <div class="loader">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- If challenge is not docker based -->
<section class="ev-sm-container ev-view challenge-container phase-container" ng-if="!challenge.page.is_docker_based">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
        <div class="row margin-bottom-cancel">
            <div class="col s12">
                <h5 class="w-300">Make Submission</h5>
            </div>

            <div class="col s12 m7 fs-16 w-300">
                <div class="ev-card-body exist-team-card">
                    <form ng-submit="challenge.makeSubmission();">
                        <p class="fs-18 w-400">Select phase:</p>
                        <ul>
                            <li ng-repeat="item in challenge.phases.results">
                                <input
                                    ng-disabled="challenge.currentDate < item.start_date || challenge.currentDate >= item.end_date"
                                    type="radio" name="selectPhase" class="with-gap selectPhase" id="{{item.id}}"
                                    value="{{item.id}}" ng-model="challenge.phaseId"
                                    ng-click="challenge.showRemainingSubmissions(item.id); challenge.loadPhaseAttributes(item.id); challenge.clearMetaAttributeValues();">
                                <label for="{{item.id}}"></label>
                                <div class="show-member-title pointer" ng-if="!item.showPrivate"><strong
                                        class="text-med-black">Phase: </strong>{{item.name}}
                                    <br>
                                    <strong class="text-med-black">Start date:
                                    </strong>{{item.start_date | date:'medium'}} {{item.start_zone}}
                                    <br>
                                    <strong class="text-med-black">End date:
                                    </strong>{{item.end_date | date:'medium'}} {{item.end_zone}}
                                </div>
                                <div class="show-member-title pointer" ng-if="item.showPrivate"><strong
                                        class="text-highlight">Phase: </strong> <span class="text-highlight">
                                        {{item.name}}</span>
                                    <br>
                                    <strong class="text-highlight">Start date: </strong><span
                                        class="text-highlight">{{item.start_date | date:'medium'}}
                                        {{item.start_zone}}</span>
                                    <br>
                                    <strong class="text-highlight">End date: </strong><span
                                        class="text-highlight">{{item.end_date | date:'medium'}}
                                        {{item.end_zone}}</span>
                                </div>
                                <div class="clearfix"></div>
                            </li>

                            <p class="fs-18 w-400">Select submission type:</p>
                            <li>
                                <input type="radio" name="submissionOptions" class="with-gap selectPhase" id="cliSubmission"
                                    value="cliSubmission" ng-click="challenge.isSubmissionUsingCli = true; challenge.isSubmissionUsingFile = false; challenge.isSubmissionUsingUrl = false">
                                <label for="cliSubmission"></label>
                                <div class="show-member-title pointer">
                                    <strong class="fs-16 w-300">Use CLI (for file size > 400MB)
                                    </strong>
                                </div>
                                <input type="radio" name="submissionOptions" class="with-gap selectPhase"
                                    id="fileUpload" value="challenge.showFileUploadOption"
                                    ng-click="challenge.isSubmissionUsingFile = true; challenge.isSubmissionUsingUrl = false; challenge.isSubmissionUsingCli = false;">
                                <label for="fileUpload"></label>
                                <div class="show-member-title pointer">
                                    <strong class="fs-16 w-300">Upload file </strong>
                                </div>
                                <div class="clearfix"></div>
                            </li>

                            <div ng-show="challenge.isSubmissionUsingFile && challenge.isSubmissionUsingCli == false && challenge.isSubmissionUsingUrl == false" class="row">
                                <div class="file-field input-field col s10">
                                    <div class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14">
                                        <span>Upload file</span>
                                        <input type="file" ngf-select ng-model="challenge.input_file"
                                            name="challenge.input_file"
                                            accept="{{challenge.currentPhaseAllowedSubmissionFileTypes}}">
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path validate" type="text" readonly>
                                    </div>
                                </div>
                            </div>
                            <div ng-show="challenge.isSubmissionUsingUrl && challenge.isSubmissionUsingCli == false && challenge.isSubmissionUsingFile == false" class="row">
                                <div class="input-field align-left col s10">
                                    <input type="text" id="fileUrl" name="fileUrl" ng-model="challenge.fileUrl">	                            
                                    <span class="form-icon"><i class="fa fa-text"></i></span>	
                                    <label for="fileUrl">Submission file URL</label>	
                                </div>	
                            </div>	
                            
                            <!-- Submission using file upload or URL -->
                            <div
                                ng-show="challenge.isSubmissionUsingUrl || challenge.isSubmissionUsingFile">
                                
                                <div ng-show="challenge.currentPhaseLeaderboardPublic">
                                    <p class="fs-14 w-400" ng>Select submission visibility:</p>
                                    <li>
                                        <input type="radio" name="submissionVisibility" class="with-gap selectPhase" id="isPublicSubmission"
                                            value="isPublicSubmission" ng-click="challenge.isPublicSubmission = true">
                                        <label for="isPublicSubmission"></label>
                                        <div class="show-member-title pointer">
                                            <strong class="fs-16 w-300">Public
                                            </strong>
                                        </div>
                                        <div class="clearfix"></div>

                                        <input type="radio" name="submissionVisibility" class="with-gap selectPhase"
                                            id="isPrivateSubmission" value="isPrivateSubmission"
                                            ng-click="challenge.isPublicSubmission = false">
                                        <label for="isPrivateSubmission"></label>
                                        <div class="show-member-title pointer">
                                            <strong class="fs-16 w-300">Private </strong>
                                        </div>
                                        <div class="clearfix"></div>
                                    </li>
                                </div>
                                <div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['method_name'] == true">
                                    <div class="input-field align-left col s10">
                                        <input type="text" id="methodName" name="methodName"
                                            ng-model="challenge.methodName">
                                        <span class="form-icon"><i class="fa fa-text"></i></span>
                                        <label for="methodName">Method name (Optional)</label>
                                    </div>
                                </div>
                                <div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['method_description'] == true">
                                    <div class="input-field align-left col s10">
                                        <textarea id="methodDesc" class="materialize-textarea" name="methodDesc"
                                            ng-model="challenge.methodDesc"></textarea>
                                        <span class="form-icon"><i class="fa fa-text"></i></span>
                                        <label for="methodDesc">Method description (Optional)</label>
                                    </div>
                                </div>
                                <div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['project_url'] == true">
                                    <div class="input-field align-left col s10">
                                        <input type="text" id="projectUrl" name="projectUrl"
                                            ng-model="challenge.projectUrl">
                                        <span class="form-icon"><i class="fa fa-text"></i></span>
                                        <label for="projectUrl">Project URL (Optional)</label>
                                    </div>
                                </div>
                                <div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['publication_url'] == true">
                                    <div class="input-field align-left col s10">
                                        <input type="text" id="publicationUrl" name="publicationUrl"
                                            ng-model="challenge.publicationUrl">
                                        <span class="form-icon"><i class="fa fa-text"></i></span>
                                        <label for="publicationUrl">Publication URL (Optional)</label>
                                    </div>
                                </div>
                                <div class="dynamicform">
                                    <div ng-if="challenge.metaAttributesforCurrentSubmission != null" ng-repeat="attribute in challenge.metaAttributesforCurrentSubmission">
                                           <div ng-if="attribute.type == 'text'">
                                                <div class="row">
                                                    <div class="input-field align-left col s10">
                                                        <input type="text" ng-model="attribute.value" name="{{attribute.name}}" id="{{attribute.name}}" ng-required="attribute.required === true">
                                                        <span class="form-icon"><i class="fa fa-text"></i></span>
                                                        <label for="{{attribute.name}}" class mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div ng-if="attribute.type == 'radio'">
                                                <div class="row">
                                                    <div class="align-left col s10">
                                                        <label for="{{attribute.name}}" class="label-radio" mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
                                                        <div class="input-field">
                                                            <md-radio-group ng-model="attribute.value" id="{{$parent.$index}}_{{attribute.name}}" name="{{attribute.name}}">
                                                                <md-radio-button ng-repeat="option in attribute.options" ng-value="option" ng-model="attribute.value">
                                                                    <span class="fs-16">{{option}}</span>
                                                                </md-radio-button>
                                                            </md-radio-group>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div ng-if="attribute.type == 'checkbox'">
                                                <div class="row">
                                                    <div class="align-left col s10">
                                                        <label for="{{attribute.name}}" class="label-checkbox" mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
                                                        <div class="input-field">
                                                            <div class="submission-options" ng-repeat="option in attribute.options" id="{{attribute.name}}" name="{{attribute.name}}">
                                                                <input type="checkbox" ng-click="challenge.toggleSelection(attribute, option);" id="{{$parent.$index}}_{{option}}" ng-value="option">
                                                                <label for="{{$parent.$index}}_{{option}}"></label>
                                                                <span  class="fs-16 w-300">{{option}}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div ng-if="attribute.type == 'boolean'">
                                                <div class="row">
                                                    <div class="align-left col s10">
                                                        <label for="{{attribute.name}}" class="label-radio" mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
                                                        <div class="input-field">
                                                            <md-radio-group ng-model="attribute.value" id="{{attribute.name}}" name="{{attribute.name}}">
                                                                <md-radio-button ng-value="'True'">True</md-radio-button>
                                                                <md-radio-button  ng-value="'False'">False</md-radio-button>
                                                            </md-radio-group>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <div class="text-highlight red-text"><strong>{{challenge.subErrors.msg}}</strong></div>
                                <section class="pagination">
                                    <div class="row rm-gut">
                                        <div class="col s12 m12">
                                            <div class="align-left">
                                                <button class="waves-effect waves-dark btn ev-btn-dark w-300 fs-16"
                                                    ng-disabled="challenge.disableSubmit || (!challenge.input_file && !challenge.fileUrl)"
                                                    type="submit" value="Submit">Submit</button>
                                                <br>
                                                <br>
                                                <span class="text-dark-black"><strong>{{challenge.submissionError}}</strong></span>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </ul>
                    </form>
                </div>
            </div>
            <div ng-if="challenge.maxExceeded" class="col s12 m5">
                <div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
                    <div class="row">
                        <span class="color-black">
                            <strong>
                                {{challenge.maxExceededMessage}}
                            </strong>
                        </span>
                    </div>
                </div>
            </div>
            <div ng-if="challenge.showSubmissionNumbers" class="col s12 m5">
                <div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
            
                    <!-- Highlighted Title Section -->
                    <div class="row" style="margin-bottom: 1rem; border-bottom: 2px solid #ccc; padding-bottom: 0.5rem;">
                        <span class="color-black" style="font-size: 18px; color: #2c3e50;">
                            Remaining Submissions:
                        </span>
                    </div>
            
                    <!-- Today Count -->
                    <div class="row" style="margin-bottom: 1rem;">
                        <span class="color-black"; style = "color:#4d4d4d;">
                            <strong>Today (Resets at 12:00 AM UTC):</strong>
                            <span class="fs-16 w-300">
                                {{challenge.remainingSubmissions.remaining_submissions_today_count}}
                            </span>
                        </span>
                    </div>
            
                    <!-- Monthly Count -->
                    <div class="row" style="margin-bottom: 1rem;">
                        <span class="color-black"; style = "color:#4d4d4d;">
                            <strong>Monthly:</strong>
                            <span class="fs-16 w-300">
                                {{challenge.remainingSubmissions.remaining_submissions_this_month_count}}
                            </span>
                        </span>
                    </div>
            
                    <!-- Total Count -->
                    <div class="row">
                        <span class="color-black"; style = "color:#4d4d4d;">
                            <strong>Total:</strong>
                            <span class="fs-16 w-300">
                                {{challenge.remainingSubmissions.remaining_submissions_count}}
                            </span>
                        </span>
                    </div>
            
                </div>
            </div>
            <div ng-if="challenge.showClock" class="col s12 m5 fs-16 w-300">
                <div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
                    <div class="row">
                        <strong class="text-med-black">
                            Message:
                        </strong> {{challenge.message.message}}
                    </div>
                    <div>
                        Next set of submissions will be available after:
                    </div>
                    <div>
                        <span ng-if="challenge.days!=0">{{challenge.days}} Days, </span>{{challenge.hours}}
                        hours : {{challenge.minutes}} minutes : {{challenge.remainingSeconds}} seconds
                    </div>
                </div>
            </div>
        </div>
        <div class="row margin-bottom-cancel">
            <div class="col s12 m12 fs-16 w-300">
                <div class="submission-instructions exist-team-card">
                <!-- Submission using cli-->
                <div ng-show="challenge.isSubmissionUsingCli === true">
                    <p class="fs-18 w-400 no-top-margin-p">Submission instructions</p>
                        <ol class="fs-16 w-300">
                        <li>
                            Install evalai-cli<br>
                            <code>$ pip install evalai{{challenge.cliVersion}}</code>
                            <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                                ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                                data-clipboard-text='pip install "evalai{{challenge.cliVersion}}"'>
                                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                            </button>
                        </li>
                        <li>
                            Add your EvalAI account token to evalai-cli<br>
                            <code>$ evalai set_token {{challenge.refreshJWT}}</code>
                            <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                                ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                                data-clipboard-text="evalai set_token {{challenge.refreshJWT}}">
                                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                            </button>
                        </li>
                        <li>
                            Make submission<br>
                            <code>$ evalai challenge {{challenge.challengeId}} phase {{challenge.phaseId}} submit --file /path/to/local/submission_file --large</code>
                            <button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
                                ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
                                data-clipboard-text="evalai challenge {{challenge.challengeId}} phase {{challenge.phaseId}} submit --file &lt;submission_file_path&gt; --large">
                                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                            </button>
                        </li>
                        <li>
                            <div class="center-content">Use &nbsp;<code> --private </code> &nbsp;or&nbsp; <code> --public </code>&nbsp; flag in the submission
                                command to make the submission private or public respectively.<br />
                            </div>
                        </li>
                        <li>
                            For more commands, please refer to <a class="highlight-link"
                                href="https://cli.eval.ai/" target="_blank">evalai-cli documentation.</a>
                        </li>
                        </ol>
                </div>
                </div>
            </div>
        </div>
    </div>
</section>
</div>

<!-- Show error when the maunal approval is not done -->
<section ng-if="!challenge.eligible_to_submit" class="ev-sm-container ev-view challenge-container">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
        <p class="fs-16 w-300">Sorry, the participant team is not approved by host yet.</p>
    </div>
</section>

<!-- Show error when the challenge is not active -->
<section ng-if="!challenge.isActive" class="ev-sm-container ev-view challenge-container">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
        <p class="fs-16 w-300">Sorry, the challenge is not active.</p>
    </div>
</section>
